<template>
  <div class="main-container container-fluid container-limited page-holder">
    <groups-breadcrumb />
    <div class="page-title-holder no-border-bottom">
      <h2 class="page-title">活跃贡献统计</h2>
    </div>
    <div class="flex">
      <div>
        <el-date-picker
          v-model="daterange"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
        <p class="info">从开始日期的00:00:00到截止日期的23:59:59。<br>当统计今天的数据时，每隔2小时可重新获取</p>
      </div>
      <div v-if="isWebAdmin || isGroupOwner || isGroupAdmin" class="m-l-auto">
        <CSV :base-daterange="validDaterange" />
      </div>
    </div>
    <global-activities
      :daterange="validDaterange"
      :selected-space="curGroup.space"
    />
    <activities-ranking
      :daterange="validDaterange"
      :selected-space="curGroup.space"
      class="m-t-22"
    />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import GroupsBreadcrumb from '@/views/groups/components/breadcrumb';
import CSV from '@/views/groups/components/csv';
import GlobalActivities from './components/global-activities';
import ActivitiesRanking from './components/activities-ranking';
import { last7days, options1 } from './date_time_picker_options';

export default {
  name: 'GroupsActivities', // 群组活跃度
  components: { GroupsBreadcrumb, CSV, GlobalActivities, ActivitiesRanking },
  data() {
    return {
      daterange: last7days, // 默认最近七天
      pickerOptions: options1,
      loading: false,
    };
  },
  computed: {
    ...mapState({ curGroup: 'currentGroup' }),
    ...mapGetters(['isWebAdmin', 'isGroupOwner', 'isGroupAdmin']),
    // 因为element自带的清空会把数据变成null，影响后面获取
    validDaterange() { return this.daterange || []; },
  },
};
</script>

<style></style>
